<template>
  <TableView class="table">
    <template #table>
      <n-tabs
        type="card"
        animated
        placement="top"
        v-model:value="curTab"
        @update:value="handleChangeTab"
        style="width: 100%; height: 100%"
      >
        <template #suffix>
          <NSpace align="center">
            <NInput
              style="width: 240rem"
              placeholder="请输入流程名称"
              v-model:value="keywords"
              clearable
              @keyup.enter="search"
            ></NInput>
            <NButton
              type="primary"
              style="width: 78px"
              @click="search"
              ghost
            >
              查询
            </NButton>
            <NButton
              type="primary"
              style="width: 78px"
              @click="resetValidate"
              ghost
            >
              重置
            </NButton>
          </NSpace>
        </template>
        <n-tab-pane
          :name="item.value"
          :tab="item.label"
          v-for="(item, index) in listWorkflowMenuRef"
          :key="index"
          style="width: 100%; height: 100%"
        >
          <div style="width: 100%; height: 100%; background-color: #f0f0ee">
            <NSpin :show="spinShow">
              <div class="main">
                <div
                  class="item-content"
                  v-for="(item, index) in functionCodeList"
                  :key="index"
                  @click="goAdd(item.value)"
                >
                  {{ item.name }}
                </div>
              </div>
            </NSpin>
          </div>
        </n-tab-pane>
      </n-tabs>
    </template>
  </TableView>
</template>
<script setup lang="ts">
import { NSpin, NTabs, NTabPane, useMessage, NSpace, NInput, NButton } from 'naive-ui'
import { ref, watch, onDeactivated } from 'vue'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
import TableView from '@/components/TableView.vue'
import router from '@/router'
import type { customProcessTypeModel } from '@/api/customProcessConfig'

const route = useRoute()
const message = useMessage()

// 去新增
const goAdd = (path: any) => {
  router.push({
    path,
    query: { redirect: router.currentRoute.value.fullPath }
  })
}
// 流程类型列表
const listWorkflowMenuRef: any = ref([])
const curTab = ref()
/**
 * 获取所有流程类型列表
 */
const getListWorkflowMenu = async () => {
  const [error, res] = await sendRequest({
    module: 'customProcessConfig',
    api: 'listWorkflowMenu'
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  let tmpArr = res.data.map((item: customProcessTypeModel) => {
    return {
      label: item.menuName,
      value: item.id
    }
  })
  tmpArr.unshift({
    label: '全部',
    value: ''
  })
  listWorkflowMenuRef.value = tmpArr
  curTab.value = tmpArr[0].value
  getFunctionCodeList()
}

const functionCodeList = ref()
const spinShow = ref(false)
const handleChangeTab = () => {
  getFunctionCodeList()
}
/**
 * 获取自定义发起流程列表
 */
const getFunctionCodeList = async (isSearch = false) => {
  spinShow.value = true
  const [error, res] = await sendRequest({
    module: 'customProcessConfig',
    api: 'listWorkflowCustomization',
    override: {
      params: {
        typeId: curTab.value,
        workflowName: isSearch ? keywords.value : ''
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  spinShow.value = false
  functionCodeList.value = res.data
}
// const keyUpDown = (e: any) => e.key == 'Enter' && getFunctionCodeList()
// onDeactivated(() => window.removeEventListener('keyup', keyUpDown, false))

// 搜索流程
const keywords = ref('')
const search = () => {
  curTab.value = ''
  getFunctionCodeList(true)
}
const resetValidate = () => {
  keywords.value = ''
  curTab.value = ''
  getFunctionCodeList()
}
watch(
  () => route.path,
  () => {
    if (route.path == '/OA/Workbench/ProgressStart') {
      getListWorkflowMenu()
      // window.addEventListener('keyup', keyUpDown, false) // 回车
    }
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
.table {
  padding: 29rem 30rem 42rem;
}

.main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  background-color: #f0f0ee;
  padding: 25rem 20rem 20rem 5rem;

  .item-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15%;
    height: 50rem;
    background-color: #d3e7d2;
    border-radius: 5rem;
    margin-bottom: 15rem;
    margin-left: 25rem;
    cursor: pointer;
  }
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
:deep(.n-tabs-pane-wrapper) {
  width: 100%;
  height: 100%;
}
</style>
